<template>
    <div class="max-box">
        <div class="attendance-management" style="width: 100%; height: 80px; transform: translate(10px, 10px);">
            <div style="height: 100%; padding: 10px 0 10px 10px;
                width: 100%; line-height: 50px;">
                <b>
                    <span style="font-size: 28px; color: rgb(82, 89, 103);">
                        &nbsp;
                        <span style="font-size: 32px;">
                            考勤报表
                        </span>
                    </span>
                </b>
            </div>
        </div>
        <!-- 筛选条件 -->
        <div class="flex" style="transform: translate(10px, 20px);">
            <!-- 考勤周期 -->
            <div class="attendance-management" style="width: 100%; height: 80px; position: relative;">
                <div class="fx-dash-filter">
                    <div class="filter-head flex">
                        <div class="head-label" title="考勤周期">
                            考勤周期
                        </div>
                    </div>
                    <div class="filter-content">
                        <el-select v-model="selected1" placeholder="" clearable filterable @change="">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </div>
                </div>
            </div>
            <!-- 所在部门 -->
            <div class="attendance-management"
                style="width: 100%; height: 80px; margin-left: 10px; position: relative;">
                <div class="fx-dash-filter">
                    <div class="filter-head flex">
                        <div class="head-label" title="所在部门">
                            所在部门
                        </div>
                    </div>
                    <div class="filter-content">
                        <el-select v-model="selected1" placeholder="" clearable filterable @change="">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </div>
                </div>
            </div>
            <!-- 姓名 -->
            <div class="attendance-management"
                style="width: 100%; height: 80px; margin-left: 10px; position: relative;">
                <div class="fx-dash-filter">
                    <div class="filter-head flex">
                        <div class="head-label" title="姓名">
                            姓名
                        </div>
                    </div>
                    <div class="filter-content">
                        <el-select v-model="selected1" placeholder="" clearable filterable @change="">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </div>
                </div>
            </div>
            <!-- 日期 -->
            <div class="attendance-management"
                style="width: 100%; height: 80px; margin-left: 10px; position: relative;">
                <div class="fx-dash-filter">
                    <div class="filter-head flex">
                        <div class="head-label" title="日期">
                            日期
                        </div>
                    </div>
                    <div class="filter-content">
                        <el-date-picker type="datetimerange" style="width: 100%;" v-model="value"
                            start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" />

                    </div>
                </div>
            </div>
        </div>
        <!-- 考勤月报 -->
        <div class="attendance-management" style="width: 100%; height: 350px; transform: translate(10px, 30px);">
            <div class="fx-dash-filter">
                <div class="filter-head flex">
                    <div class="head-title" title="考勤月报">
                        考勤月报
                    </div>
                </div>
                <div class="filter-content">

                    <div style="overflow-x: auto; width: 100%;">
                        <el-table :data="attendanceMonthlyData" stripe height="250px"
                            style="width: 100%; min-width: 1200px;" @row-click="handleRowClick">
                            <el-table-column sortable v-for="col in attendanceMonthly_columns" :prop="col.id"
                                :key="col.id" :label="col.label" :width="col.width || 170" />
                        </el-table>
                    </div>

                </div>
                <div style="margin: 15px;">
                    <el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1"
                        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" />
                </div>
            </div>
        </div>
        <!-- 补卡申请明细 -->
        <div class="attendance-management" style="width: 100%; height: 320px; transform: translate(10px, 40px);">
            <div class="fx-dash-filter">
                <div class="filter-head flex">
                    <div class="head-title" title="补卡申请明细">
                        补卡申请明细
                    </div>
                </div>
                <div class="filter-content">

                    <div style="overflow-x: auto; width: 100%;">
                        <el-table :data="cardReplacementData" stripe height="220px"
                            style="width: 100%; min-width: 1200px;" @row-click="handleRowClick">
                            <el-table-column sortable v-for="col in cardReplacement_columns" :prop="col.id"
                                :key="col.id" :label="col.label" :width="col.width">
                                <!-- 对补签时间段列单独处理，用 ElTag 渲染 -->
                                <template #default="scope">
                                    <template v-if="col.id === 'timeBucket'">
                                        <el-tag effect="dark" :type="getTagType(scope.row[col.id])">
                                            {{ scope.row[col.id] }}
                                        </el-tag>
                                    </template>
                                    <template v-else>
                                        {{ scope.row[col.id] }}
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
                <div style="margin: 15px;">
                    <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2"
                        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" />
                </div>
            </div>
        </div>
        <!-- 加班明细 -->
        <div class="attendance-management" style="width: 100%; height: 320px; transform: translate(10px, 50px);">
            <div class="fx-dash-filter">
                <div class="filter-head flex">
                    <div class="head-title" title="加班明细">
                        加班明细
                    </div>
                </div>
                <div class="filter-content">

                    <div style="overflow-x: auto; width: 100%;">
                        <el-table :data="overtimeData" stripe height="220px"
                            style="width: 100%; min-width: 1200px;" @row-click="handleRowClick">
                            <template v-for="(item, index) in overtime_columns" :key="index">
                                <el-table-column sortable v-if="!item.children" :prop="item.prop" :label="item.label"
                                    :width="item.width" />

                                <el-table-column v-else :label="item.label">
                                    <template v-for="(child, index) in item.children" :key="index">
                                        <el-table-column :prop="child.prop" :label="child.label" :width="child.width" />
                                    </template>
                                </el-table-column>

                            </template>
                        </el-table>
                    </div>
                </div>
                <div style="margin: 15px;">
                    <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3"
                        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" />
                </div>
            </div>
        </div>
        <!-- 请假明细 -->
        <div class="attendance-management" style="width: 100%; height: 320px; transform: translate(10px, 60px);">
            <div class="fx-dash-filter">
                <div class="filter-head flex">
                    <div class="head-title" title="请假明细">
                        请假明细
                    </div>
                </div>
                <div class="filter-content">

                    <div style="overflow-x: auto; width: 100%;">
                        <el-table :data="leaveData" stripe height="220px" style="width: 100%; min-width: 1200px;"
                            @row-click="handleRowClick">
                            <template v-for="(item, index) in leave_columns" :key="index">
                                <el-table-column sortable v-if="!item.children" :prop="item.prop" :label="item.label"
                                    :width="item.width">
                                    <!-- 添加请假类型的特殊渲染 -->
                                    <template #default="scope" v-if="item.prop === 'leaveType'">
                                        <el-tag type="info">
                                            {{ scope.row[item.prop] }}
                                        </el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column v-else :label="item.label">
                                    <template v-for="(child, index) in item.children" :key="index">
                                        <el-table-column :prop="child.prop" :label="child.label" :width="child.width" />
                                    </template>
                                </el-table-column>

                            </template>
                        </el-table>
                    </div>

                </div>
                <div style="margin: 15px;">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" />
                </div>
            </div>
        </div>
        <!-- 调休明细 -->
        <div class="attendance-management" style="width: 100%; height: 320px; transform: translate(10px, 70px);">
            <div class="fx-dash-filter">
                <div class="filter-head flex">
                    <div class="head-title" title="调休明细">
                        调休明细
                    </div>
                </div>
                <div class="filter-content">

                    <div style="overflow-x: auto; width: 100%;">
                        <el-table :data="vacationData" stripe height="220px"
                            style="width: 100%; min-width: 1200px;" @row-click="handleRowClick">
                            <template v-for="(item, index) in vacation_columns" :key="index">
                                <el-table-column sortable v-if="!item.children" :prop="item.prop" :label="item.label"
                                    :width="item.width" />

                                <el-table-column v-else :label="item.label">
                                    <template v-for="(child, index) in item.children" :key="index">
                                        <el-table-column :prop="child.prop" :label="child.label" :width="child.width" />
                                    </template>
                                </el-table-column>

                            </template>
                        </el-table>
                    </div>

                </div>
                <div style="margin: 15px;">
                    <el-pagination v-model:current-page="currentPage5" v-model:page-size="pageSize5"
                        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="400" />
                </div>
            </div>
        </div>
    </div>

    <el-dialog title="考勤月报" v-model="dialogVisible" width="780px">
        <attendance-monthly :monthlyData="selectedRow"></attendance-monthly>
    </el-dialog>

</template>

<script setup>
import { ref } from 'vue'

import attendanceMonthly from './attendanceMonthly.vue'

const currentPage1 = ref(4)
const pageSize1 = ref(100)
const currentPage2 = ref(4)
const pageSize2 = ref(100)
const currentPage3 = ref(4)
const pageSize3 = ref(100)
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const currentPage5 = ref(4)
const pageSize5 = ref(100)
const background = ref(false)
const disabled = ref(false)

const value = ref('')

const dialogVisible = ref(false)
const selectedRow = ref({})
const dialogVisible1 = ref(false)
const selectedRow1 = ref({})
const dialogVisible2 = ref(false)
const selectedRow2 = ref({})

const handleRowClick = (row, event, column) => {
    selectedRow.value = row
    dialogVisible.value = true
}

const handleRowClick1 = (row, event, column) => {
    selectedRow1.value = row
    dialogVisible1.value = true
}

const handleRowClick2 = (row, event, column) => {
    console.log(row);
    selectedRow2.value = row
    dialogVisible2.value = true
}

// 考勤月报表头数据
const attendanceMonthly_columns = ref([
    { id: "name", label: "姓名" },
    { id: "department", label: "所在部门" },
    { id: "attendancePeriod", label: "考勤周期" },
    { id: "startTime", label: "考勤周期开始时间" },
    { id: "endTime", label: "考勤周期结束时间" },
    { id: "workdays", label: "工作日天数" },
    { id: "clockInNumber", label: "考勤打卡次数" },
    { id: "beLateNumber", label: "迟到次数" },
    { id: "earlyLeaveNumber", label: "早退次数" },
    { id: "legworkClockInNumber", label: "外勤打卡次数" },
    { id: "cardReplacementNumber", label: "补卡次数" },
    { id: "leaveNumber", label: "请假天数" },
    { id: "personalLeaveNumber", label: "事假天数" },
    { id: "sickLeaveNumber", label: "病假天数" },
    { id: "daysOffNumber", label: "调休天数" },
    { id: "workdayOvertimeNumber", label: "工作日加班天数" },
    { id: "weekendOvertimeNumber", label: "周末加班天数" },
    { id: "holidayOvertimeNumber", label: "节假日加班天数" }
])

// 补卡申请表头数据
const cardReplacement_columns = ref([
    { id: "name", label: "姓名" },
    { id: "department", label: "所在部门" },
    { id: "retroactiveDate", label: "补签日期" },
    { id: "week", label: "星期" },
    { id: "timeBucket", label: "补签时间段" },
    { id: "reason", label: "补签事由说明" },
]);

// 加班申请表头数据
const overtime_columns = ref([
    {
        label: '姓名',
        prop: 'name'
    },
    {
        label: '所在部门',
        prop: 'department'
    },
    {
        label: '加班明细',
        children: [
            {
                label: '加班开始时间',
                prop: 'overtimeStartTime'
            },
            {
                label: '加班结束时间',
                prop: 'overtimeEndTime'
            },
            {
                label: '星期',
                prop: 'week'
            },
            {
                label: '加班时长(h)',
                prop: 'overtimeHours'
            },
            {
                label: '加班天数',
                prop: 'overtimeDays'
            },
            {
                label: '归属考勤周期',
                prop: 'attendancePeriod'
            }
        ]
    },
    {
        label: '加班事由',
        prop: 'overtimeReason'
    }
]);

// 请假申请表头数据
const leave_columns = ref([
    {
        label: '姓名',
        prop: 'name'
    },
    {
        label: '所在部门',
        prop: 'department'
    },
    {
        label: '请假类型',
        prop: 'leaveType'
    },
    {
        label: '请假日期',
        children: [
            {
                label: '请假日期',
                prop: 'leaveDate'
            },
            {
                label: '请假时段',
                prop: 'leavePeriod'
            },
            {
                label: '请假天数小计',
                prop: 'duration'
            },
            {
                label: '归属考勤周期',
                prop: 'attendanceCycle'
            }
        ]
    },
    {
        label: '合计请假天数',
        prop: 'totalLeaveDays'
    },
    {
        label: '请假事由说明',
        prop: 'reason'
    }
]);

// 调休申请表头数据
const vacation_columns = ref([
    {
        label: '姓名',
        prop: 'name'
    },
    {
        label: '所在部门',
        prop: 'department'
    },
    {
        label: '请假类型',
        prop: 'leaveType'
    },
    {
        label: '调休',
        children: [
            {
                label: '调休日期',
                prop: 'vacationDate'
            },
            {
                label: '调休时段',
                prop: 'vacationPeriod'
            },
            {
                label: '调休天数小计',
                prop: 'duration'
            },
            {
                label: '归属考勤周期',
                prop: 'attendanceCycle'
            }
        ]
    },
    {
        label: '合计调休天数',
        prop: 'totalVacationDays'
    }
]);

const columns = [
    { id: "day", label: "日期" },
    { id: "name", label: "姓名" },
    { id: "department", label: "所在部门" },
    { id: "attendanceCycle", label: "归属考勤周期" },
    { id: "amSignIn", label: "上午签到状态" },
    { id: "pmSignOut", label: "下午签退状态" },
    { id: "week", label: "星期" },
    { id: "workingCondition", label: "工作状态" },
    { id: "remark", label: "备注" },
    { id: "festival", label: "节日" },
]

// 表格渲染数据
const tableData = ref([
    {
        day: "2023-07-27",
        name: "贺",
        department: "111",
        attendanceCycle: "2023-7",
        amSignIn: "正常签到",
        pmSignOut: "正常签退",
        week: "四",
        workingCondition: "正常",
        remark: "",
        festival: ""
    },
    {
        day: "2023-07-27",
        name: "贺",
        department: "111",
        attendanceCycle: "2023-7",
        amSignIn: "正常签到",
        pmSignOut: "正常签退",
        week: "四",
        workingCondition: "正常",
        remark: "",
        festival: ""
    },
    {
        day: "2023-07-27",
        name: "贺",
        department: "111",
        attendanceCycle: "2023-7",
        amSignIn: "正常签到",
        pmSignOut: "正常签退",
        week: "四",
        workingCondition: "正常",
        remark: "",
        festival: ""
    },
    {
        day: "2023-07-27",
        name: "贺",
        department: "111",
        attendanceCycle: "2023-7",
        amSignIn: "正常签到",
        pmSignOut: "正常签退",
        week: "四",
        workingCondition: "正常",
        remark: "",
        festival: ""
    },
    {
        day: "2023-07-19",
        name: "贺",
        department: "111",
        attendanceCycle: "2023-7",
        amSignIn: "调休",
        pmSignOut: "调休",
        week: "三",
        workingCondition: "",
        remark: "",
        festival: ""
    }
]);

// 考勤月报数据
const attendanceMonthlyData = [
    {
        name: "贺",
        department: "111",
        attendancePeriod: "2023-7",
        startTime: "2023-07-01",
        endTime: "2023-07-31",
        workdays: 21,
        clockInNumber: 27,
        beLateNumber: 4,
        earlyLeaveNumber: 2,
        legworkClockInNumber: 2,
        cardReplacementNumber: 4,
        leaveNumber: 4,
        personalLeaveNumber: 1,
        sickLeaveNumber: 2,
        daysOffNumber: 1,
        workdayOvertimeNumber: "",
        weekendOvertimeNumber: 2,
        holidayOvertimeNumber: ""
    },
    {
        name: "贺",
        department: "111",
        attendancePeriod: "2023-7",
        startTime: "2023-07-01",
        endTime: "2023-07-31",
        workdays: 21,
        clockInNumber: 19,
        beLateNumber: 3,
        earlyLeaveNumber: 2,
        legworkClockInNumber: 4,
        cardReplacementNumber: 2,
        leaveNumber: 4,
        personalLeaveNumber: "",
        sickLeaveNumber: 1.5,
        daysOffNumber: 1.5,
        workdayOvertimeNumber: 1.5,
        weekendOvertimeNumber: "",
        holidayOvertimeNumber: ""
    }
];

// 补卡申请数据
const cardReplacementData = ref([
    {
        id: 1, // 可根据实际需求添加唯一标识，如接口返回的记录 ID
        name: "贺",
        department: "111",
        retroactiveDate: "2025-07-08",
        week: "星期二",
        timeBucket: "上午签到",
        reason: "有事"
    },
    {
        id: 2,
        name: "贺",
        department: "111",
        retroactiveDate: "2025-07-02",
        week: "星期三",
        timeBucket: "下午签退",
        reason: "有事"
    },
    {
        id: 3,
        name: "贺",
        department: "111",
        retroactiveDate: "2023-07-24",
        week: "星期一",
        timeBucket: "上午签到",
        reason: "忘记签到"
    },
    {
        id: 4,
        name: "贺",
        department: "111",
        retroactiveDate: "2023-07-24",
        week: "星期一",
        timeBucket: "上午签到",
        reason: "忘记签到"
    },
    {
        id: 5,
        name: "贺",
        department: "111",
        retroactiveDate: "2023-07-20",
        week: "星期四",
        timeBucket: "上午签到",
        reason: "路上堵车堵了半小时"
    }
]);

// 加班申请数据
const overtimeData = ref([
    {
        name: '贺',
        department: '111',
        overtimeStartTime: '2023-07-14 16:26',
        overtimeEndTime: '2023-07-14 23:26',
        week: '星期五',
        overtimeHours: 7,
        overtimeDays: 0.5,
        attendancePeriod: '2023-7',
        overtimeReason: '接入客户问题咨询'
    },
    {
        name: '贺',
        department: '111',
        overtimeStartTime: '2023-07-15 10:00',
        overtimeEndTime: '2023-07-15 20:00',
        week: '星期六',
        overtimeHours: 10,
        overtimeDays: 1,
        attendancePeriod: '2023-7',
        overtimeReason: '系统紧急维护'
    }
]);

// 请假申请数据
const leaveData = [
    {
        name: '贺',
        department: '111',
        leaveType: '年假',
        leaveDate: '2023-07-10',
        leavePeriod: '全天',
        duration: 1,
        attendanceCycle: '2023-7',
        totalLeaveDays: 1,
        reason: '工作状态不佳，调整一天'
    },
    {
        name: '贺',
        department: '111',
        leaveType: '病假',
        leaveDate: '2023-07-13',
        leavePeriod: '全天',
        duration: 1,
        attendanceCycle: '2023-7',
        totalLeaveDays: 2,
        reason: '肠胃炎，去医院检查和休息。'
    },
    {
        name: '贺',
        department: '111',
        leaveType: '病假',
        leaveDate: '2023-07-14',
        leavePeriod: '全天',
        duration: 1,
        attendanceCycle: '2023-7',
        totalLeaveDays: 2,
        reason: '肠胃炎，去医院检查和休息。'
    },
    {
        name: '贺',
        department: '111',
        leaveType: '病假',
        leaveDate: '2023-07-21',
        leavePeriod: '全天',
        duration: 1,
        attendanceCycle: '2023-7',
        totalLeaveDays: 1.5,
        reason: '生病了，休息一下'
    },
    {
        name: '贺',
        department: '111',
        leaveType: '病假',
        leaveDate: '2023-07-24',
        leavePeriod: '上午',
        duration: 0.5,
        attendanceCycle: '2023-7',
        totalLeaveDays: 1.5,
        reason: '生病了，休息一下'
    }
];

const vacationData = [
    {
        name: '贺',
        department: '111',
        leaveType: '调休',
        vacationDate: '2023-07-12',
        vacationPeriod: '上午',
        duration: 0.5,
        attendanceCycle: '2023-7',
        totalVacationDays: 0.5
    },
    {
        name: '贺',
        department: '111',
        leaveType: '调休',
        vacationDate: '2023-07-11',
        vacationPeriod: '上午',
        duration: 0.5,
        attendanceCycle: '2023-7',
        totalVacationDays: 0.5
    },
    {
        name: '贺',
        department: '111',
        leaveType: '调休',
        vacationDate: '2023-07-25',
        vacationPeriod: '下午',
        duration: 0.5,
        attendanceCycle: '2023-7',
        totalVacationDays: 0.5
    },
    {
        name: '贺',
        department: '111',
        leaveType: '调休',
        vacationDate: '2023-07-19',
        vacationPeriod: '全天',
        duration: 1,
        attendanceCycle: '2023-7',
        totalVacationDays: 1
    }
];

// 根据状态返回 Tag 类型，可自定义拓展
const getTagType = (status) => {
    switch (status) {
        case "上午签到":
            return "success";
        case "下午签退":
            return "primary";
        default:
            return "default";
    }
};

</script>

<style scoped>
.max-box {
    position: relative;
    /* 改为相对定位或直接移除fixed定位 */
    width: 100%;
    min-height: 100vh;
    /* 至少占满视口高度 */
    overflow: visible;
    /* 允许滚动 */
    /* background: #f5f6f8; */
}

.attendance-management {
    background: #fff;
    -webkit-box-shadow: 0 2px 6px 0 rgba(84, 48, 132, .1);
    box-shadow: 0 2px 6px 0 rgba(84, 48, 132, .1);
    height: 100%;
    width: 100%;
}

/* .attendance-management:hover {
    -webkit-box-shadow: 0 6px 14px 0 rgba(84, 48, 132, .15) !important;
    box-shadow: 0 6px 14px 0 rgba(84, 48, 132, .15) !important;
} */

.flex {
    display: flex;
}

.fx-dash-filter {
    bottom: 5px;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.filter-head {
    align-items: center;
    height: 30px;
}

.head-title {
    font-weight: 700;
}

</style>
